<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>createPattern</title>
</head>
<body>
	<canvas id="canvas" width="200" height="300px" style="border: 1px solid #ccc"></canvas>

	<script type="text/javascript">
		
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		var img = new Image();

		img.src = "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png";

		img.onload = function () {

			var pattern = ctx.createPattern(img, "repeat");

			ctx.fillStyle = pattern;
			ctx.fillRect(0,0,400,400)
		}


	</script>
</body>
</html>